<template>
    <header>
        <van-icon name="arrow-left" @click="$router.go(-1)" />
        <span v-if="$route.meta.topName">{{ $route.meta.topName }}</span>
        <van-tabs v-model:active="active" v-else width="600">
            <a href="#sp">
                <van-tab title="商品"></van-tab>
            </a>
            <a href="#pj">
                <van-tab title="评价"></van-tab>
            </a>
            <a href="#xq">
                <van-tab title="详情"></van-tab>
            </a>
            <a href="#tj">
                <van-tab title="推荐"></van-tab>
            </a>
        </van-tabs>
    </header>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            active: 0
        }
    },

}
</script>

<style lang="less" scoped>
:deep(.van-tabs) {
    width: 90%;
    background: rgb(236, 232, 232) !important;
}

header {
    height: 50px;
    width: 100%;
    background: rgb(236, 232, 232);

    text-align: center;
    line-height: 50px;
    font-family: '微软雅黑';
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    display: flex;
    justify-content: space-around;
    align-items: center;

    van-icon {
        float: left;
        width: 20%;
    }

    span {
        width: 80%;
        margin: 0 auto;
        display: inline-block;
    }
}
</style>